<!doctype html> 
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
<meta name="keywords" content="百场耕耘 一路生花" />
<meta name="description" content="百场耕耘 一路生花" />
<title>百场耕耘 一路生花</title>  
<link href="css/swiper-bundle.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/swiper-bundle.min.js"></script>
</head>
<body> 
<div class="load-wrap">
    <div class="load-box">
        <div id="load-bus"><img src="/images/bus.png"></div>
        <div id="load-bar">
            <div id="pre-load"></div>
            <div id="pre-dot"></div>
        </div> 
        <div id="load-percent"></div>
    </div>
</div>
<div class="isMobile"><div class="font">请在手机端访问</div></div>
<div class="isLandscape"><div class="font">请旋转手机</div></div>
<div class="btn_music"></div>
<audio id="myAudio" src="/images/test.mp3"  loop></audio>
<div class="page_content"> 
    <div class="indexSwiper swiper" id="swiper-container1"> 
        <div class="swiper-wrapper">
            <!-- 第一屏 start-->
            <div class="swiper-slide">
                <div class="section section1">
                    <img src="/images/page1_new.jpg">
                    <div class="logo"><img src="/images/page1_logo.png"></div>
                    <div class="title"><img src="/images/page1_wenan.png"></div>
                    <div class="paizi"><img src="/images/page1_paizi.png"></div>
                    <div class="bus"><img src="/images/page1_bus.png"></div>
                    <div class="btn_start"><img src="/images/start.png"></div>
                </div>  
            </div>
            <!-- 第一屏 end-->
            <!-- 第二屏 start-->
            <div class="swiper-slide">
                <div class="section section2">
                    <div class="page2_title"><img src="/images/page2_title.png"></div>
                    <div class="flower_box">
                        <div class="flower flower1"><img src="/images/flower1.png"></div>
                        <div class="flower flower2"><img src="/images/flower2.png"></div>
                    </div> 
                    <div class="bashi"><img src="/images/bashi.png"></div>
                    <div class="arrow"></div>
                </div> 
            </div> 
            <!-- 第二屏 end--> 
            <!-- 第三屏 start-->
            <div class="swiper-slide">
                <div class="section section3">
                    <div class="swiper" id="swiper-container2">
                        <div class="swiper-wrapper">
                           <div class="swiper-slide">  
                                <div class="road_bg road_bg1"><img src="/images/road1.png"></div>
                                <div class="img"><img src="/images/page3_img11.png"></div>
                                <div class="slide1_lupai1 abs"><img src="/images/slide1_lupai1.png"></div>
                                <div class="slide1_lupai2 abs"><img src="/images/slide1_lupai2.png"></div>
                                <div class="slide1_bus abs"><img src="/images/slide1_bus.png"></div>
                            </div>
                            <div class="swiper-slide">  
                                <div class="road_bg road_bg2"><img src="/images/road2.png"></div>
                                <div class="img"><img src="/images/page3_img22.png"></div>
                                <div class="slide2_lupai1 abs"><img src="/images/slide2_lupai1.png"></div>
                                <div class="slide2_lupai2 abs"><img src="/images/slide2_lupai2.png"></div>
                                <div class="slide2_bus abs"><img src="/images/slide2_bus.png"></div>
                            </div>
                            <div class="swiper-slide"> 
                                <div class="road_bg road_bg3"><img src="/images/road3.png"></div>
                                <div class="img"><img src="/images/page3_img33.png"></div>
                                <div class="slide3_lupai1 abs"><img src="/images/slide3_lupai1.png"></div>
                                <div class="slide3_lupai2 abs"><img src="/images/slide3_lupai2.png"></div>
                                <div class="slide3_bus abs"><img src="/images/slide3_bus.png"></div>
                            </div>
                            <div class="swiper-slide"> 
                                <div class="road_bg road_bg4"><img src="/images/road4.png"></div>
                                <div class="img"><img src="/images/page3_img44.png"></div>
                                <div class="slide4_lupai1 abs"><img src="/images/slide4_lupai1.png"></div>
                                <div class="slide4_lupai2 abs"><img src="/images/slide4_lupai2.png"></div>
                                <div class="slide4_bus abs"><img src="/images/slide2_bus.png"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="road_bg road_bg5"><img src="/images/road5.png"></div> 
                                <div class="img"><img src="/images/page3_img55.png"></div>
                                <div class="slide5_lupai1 abs"><img src="/images/slide5_lupai1.png"></div>

                            </div>
                        </div>
                        <div class="swiper-scrollbar"></div>
                    </div>
                    <div class="arrow"></div>
                </div>
            </div> 
            <!-- 第三屏 end--> 
            <!-- 第四屏 start-->
            <div class="swiper-slide" th:if="${num == 0}">
                <div class="section section4">
                    <img src="/images/page_hongbao.jpg">
                    <div class="btn_rules"><img src="/images/icon-rules.png"></div>
                    <div class="bus"><img src="/images/bus1.png"></div>
                    <div class="toy"><img src="/images/toy.png"></div>
                    <div class="btn_hongbao" onclick="openHongbao()"><img src="/images/btn_hongbao.png"></div>
                    <div class="rulesPop">
                        <div class="rules_box">
                            <div class="rules_close"><img src="/images/close.png"></div>
                            <div class="rules_top"><img src="/images/rules_img.png"></div>
                            <div class="rules_con">
                                <ol>
                                    <li>本次活动对象为“常银巴士”微信小程序用户。</li>
                                    <li>中奖后奖励通过微信红包实时发放至用户微信，如因个人账户问题遭微信拦截导致领取失败，视为放弃奖励，后期不再补发。</li>
                                    <li>活动期间通过不当行为参与活动的用户，常熟农商银行有权取消其参与资格本活动在法律许可的范围内，常熟农商银行保留调整、暂停和终止活动的权利。</li>
                                </ol>
                                <p>* 活动一切解释权归主办方所有</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
            <!-- 第四屏 end--> 
            <!-- 第五屏 start-->
            <div class="swiper-slide" th:if="${num > 0}">
                <div class="section section5">
                    <img src="/images/page5.jpg">
                    <div class="wenan"><img src="/images/page_wenan1.png"></div>
                    <div class="bus"><img src="/images/page5_bus.png"></div>
                    <div class="page_btns">
                        <div class="hongbao_box semibold" th:if="${sysLotteryRecords != null && sysLotteryRecords.status == 'Y'}">
                            <div id="result">恭喜您抽中<span class="zhongjiang" th:text="${sysLotteryRecords.money}">1.88</span>元<br>这份幸运，为‘相守’而来</div>
                        </div>
                        <div class="hongbao_box semibold" th:if="${sysLotteryRecords != null && sysLotteryRecords.status == 'N'}">
                            <div id="result">这次未中没关系<br>常银陪伴不缺席</div>
                        </div>
                        <a class="page_btn1" onclick="jumpToHome()"><img src="/images/page_btn1.png"></a>
                        <a class="page_btn2" onclick="jumpToMiniProgram()" ><img src="/images/page_btn2.png"></a>
                    </div>
                </div>
            </div>
            <!-- 第五屏 end-->
        </div> 
    </div>
    <input type="hidden" name="token" th:value="${token}">
</div> 
<script src="/js/index.js"></script> 
<script src="/js/preload.min.js"></script>
<script type="text/javascript">
    var token = "${token}"
    var mainSwiper;
    console.log(token)

    //调用
    $.QianLoad.PageLoading({
        sleep: 50
    });

    function jumpToMiniProgram() {
        const appId = 'wx1234567890abcdef'; // 你的小程序AppID
        const path = '/modules-bus/pages/callBus'; // 目标路径
        const ghId = 'gh_e1093822fbd7'; // 原始ID

        // 方式1: 使用URL Scheme（需要后端支持生成有效的scheme）
        const schemeUrl = `weixin://dl/business/?t=TICKET&gh_id=${ghId}&path=${encodeURIComponent(path)}`;

        // 方式2: 使用universal link（iOS）
        const universalLink = `https://wxaurl.cn/${appId}/jump-wxa?gh_id=${ghId}&path=${encodeURIComponent(path)}`;

        // 方式3: 使用微信官方提供的跳转方式
        window.location.href = schemeUrl;

        // 检测是否跳转成功
        let timer = setTimeout(function() {
            alert('跳转失败，请确保已安装微信并打开小程序');
        }, 3000);

        window.onblur = function() {
            clearTimeout(timer);
        }
    }

    function jumpToHome(){
        window.location.reload();
    }

    function openHongbao(){
        var token = $('input[name="token"]').val();
        var $btn = $('.btn_hongbao');

        // 禁用按钮防止重复点击
        $btn.prop('disabled', true).css('opacity', '0.6');

        // 显示加载中
        showLoading('抽奖中...');

        $.ajax({
            url: "/web/lottery?uuid=" + token,
            type: "GET",
            dataType: "json",
            success: function(res) {
                console.log(res,'res')
                hideLoading();

                if(res.code == 200){
                    // 创建第五屏内容
                    showResultScreen(res.data);
                } else {
                    alert(res.msg)
                    $btn.prop('disabled', false).css('opacity', '1');
                }
            },
            error: function(xhr, status, error) {
                hideLoading();
                console.log("抽奖请求错误:", error);
                $btn.prop('disabled', false).css('opacity', '1');
            }
        });
    }

    // 显示第五屏结果
    // 显示第五屏结果
    function showResultScreen(lotteryData) {
        var resultHtml = '';
        if(lotteryData.status == 'Y') {
            // 中奖
            resultHtml = `
            <div class="hongbao_box semibold">
                <div id="result">恭喜您抽中<span class="zhongjiang">${lotteryData.money}</span>元<br>这份幸运，为'相守'而来</div>
            </div>
        `;
        } else {
            // 未中奖
            resultHtml = `
            <div class="hongbao_box semibold">
                <div id="result">这次未中没关系<br>常银陪伴不缺席</div>
            </div>
        `;
        }

        // 直接显示结果，不操作Swiper
        $('.section4').html(`
        <div class="section section5">
            <img src="/images/page5.jpg">
            <div class="wenan"><img src="/images/page_wenan1.png"></div>
            <div class="bus"><img src="/images/page5_bus.png"></div>
            <div class="page_btns">
                ${resultHtml}
                <a class="page_btn1" onclick="jumpToHome()"><img src="/images/page_btn1.png"></a>
                <a class="page_btn2" onclick="jumpToMiniProgram()"><img src="/images/page_btn2.png"></a>
            </div>
        </div>
    `);
    }

    // 显示加载提示
    function showLoading(message) {
        $('body').append(`
            <div class="loading-overlay" style="
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.7);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999;
                color: white;
                font-size: 18px;
            ">
                ${message || '加载中...'}
            </div>
        `);
    }

    // 隐藏加载提示
    function hideLoading() {
        $('.loading-overlay').remove();
    }
</script>
</body>
</html>
